<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        
    </style>
</head>
<body>
    <div id="app">
        <h1>{{title}}</h1>
        <!-- 4. 使用组件 -->
        <my-nav></my-nav>
        <hello></hello>
    </div>
</body>
<script src="../libs/vue.min.js"></script>
<!-- 1. 创建组件结构 -->
<template id="nav">
    <div>
        <ul>
            <li v-for="(item,idx) in list" :key="idx">{{item}}</li>
        </ul>
        <hello></hello>
        <search></search>
    </div>
</template>

<template id="search">
    <div>
        <input type="text" v-model="sk">
        <button>放</button>
        <hello></hello>
        <span>{{sk}}</span>
    </div>
</template>

<script>
    const searchTemp = {
        template: "#search",
        data(){
            return {
                sk:"手机"
            }
        }
    }

    // 2. 创建组件对象
    const navTemp = {
        template: "#nav",
        data(){
            return {
                list:["张三","李四","王二"]
            }
        },
        components:{
            search: searchTemp
        }
    }

    Vue.component("hello", {
        template:`<div><span>{{title}}</span></div>`,
        data(){
            return{
                title:"hello world"
            }
        }
    })

    new Vue({
        el:"#app",
        data(){
            return{
                title:"根组件"
            }
        },
        // 3. 注册组件，谁注册谁使用
        components:{
            myNav: navTemp
        }
    })


    // 全局：hello
    // 根：app
    // 根的子：nav
    // 根的孙（nav的子）：search

</script>
</html>